<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            text-decoration: none;
        }

        div {
            width: 100px;
            text-align: center;
        }

        span {
            display: block;
            width: 100px;
            height: 50px;
            background-color: bisque;
            line-height: 50px;
            border: 1px solid slateblue;

        }

        .menu {
            width: 100px;
            background-color: blue;
            display: none;

        }

        .menu li {
            width: 100px;
            height: 50px;
            list-style: none;
            background-color: aquamarine;
            line-height: 50px;
            border: 1px solid slateblue;
        }
    </style>
</head>

<body>
    <div>
        <ul>
            <li>
                <span class="s1" flag="true">菜单1</span>
                <ul class="menu">
                    <li>子菜单1</li>

                    <li>子菜单2</li>

                    <li>子菜单3</li>
                </ul>
            </li>
            <li>
                <span class="s1" flag="true">菜单1</span>
                <ul class="menu">
                    <li>子菜单1</li>

                    <li>子菜单2</li>

                    <li>子菜单3</li>
                </ul>
            </li>
        </ul>

    </div>
    <script>




        // nextElementSibling
        let boxName = document.querySelector("div");

        // let flag = true;


        boxName.onclick = function (e) {
            if (e.target.className === 's1') {
                // 获取开关
                const flag = e.target.getAttribute('flag');
                if (flag === 'true') {
                    e.target.nextElementSibling.style.display = 'block';
                    // flag = false;
                    // flag = !flag;
                    e.target.setAttribute('flag', 'false');
                }
                else {
                    e.target.nextElementSibling.style.display = 'none';
                    // flag = true;
                    e.target.setAttribute('flag', 'true');
                }

            }
        }





        // 给每个span 添加自定义属性
        const oSpans = document.querySelectorAll('span');

        for (let i = 0; i < oSpans.length; i++) {
            oSpans.flag = true;
        }



    </script>
</body>

</html>